<template>
    <div id="app">
        <h1 :class="{ h1: showColor }">hello vue</h1>
        <button @click="changeColor">改变颜色</button>
        <hr>
        <ul>
            <li @click="clickItem(item.id)" :class="{ h1: item.id === selectId }" v-for="item in list" :key="item.id">
                {{ item.id }}
            </li>
        </ul>
        <hr>
        <button @click="changeCS">改变颜色和大小</button>
        <p :style="{ color: pColor, fontSize: pSize }">vue!</p>

    </div>
</template>
  
<script>

export default {
    name: 'App',
    data() {
        return {
            showColor: true,
            list: [
                { id: 1, name: '111', },
                { id: 2, name: '222', },
                { id: 3, name: '333', },
                { id: 4, name: '444', },
            ],
            selectId: null,
            colors: ["red", "blue", "pink", "yellow", "brown", "green"],
            sizes: ["12px", "24px", "36px", "48px", "56px"],
            pColor: "",
            pSize: "",
        }
    },
    methods: {
        changeColor() {
            this.showColor = !this.showColor
        },
        clickItem(id) {
            this.selectId = id
        },
        changeCS() {
            this.pColor = this.colors[~~(Math.random() * this.colors.length)],
                this.pSize = this.sizes[~~(Math.random() * this.sizes.length)]
        }
    }
}
</script>
  
<style>
body {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.h1 {
    color: aquamarine;
}
</style>
  